<template>
  <el-form class="query-container" ref="queryFormRef" :model="queryParams" :inline="true" @submit.native.prevent>
<!--    <el-form-item label="设计部门" prop="deptId">-->
<!--      <el-select v-model="queryParams.deptId" style="width:150px">-->
<!--        <el-option value="1" label="设计部门1"></el-option>-->
<!--        <el-option value="2" label="设计部门2"></el-option>-->
<!--        <el-option value="3" label="设计部门3"></el-option>-->
<!--        <el-option value="4" label="设计部门4"></el-option>-->
<!--        <el-option value="5" label="设计部门5"></el-option>-->
<!--        <el-option value="6" label="设计部门6"></el-option>-->
<!--      </el-select>-->
<!--    </el-form-item>-->
    <el-form-item label="设计师转单进度" prop="transferProgress">
      <el-select v-model="queryParams.transferProgress" style="width:150px">
        <el-option value="10" label="一阶段 施工图纸"></el-option>
        <el-option value="20" label="二阶段 图纸报价审核"></el-option>
        <el-option value="30" label="三阶段 图纸修改"></el-option>
        <el-option value="40" label="四阶段 图纸审核完成"></el-option>
        <el-option value="50" label="五阶段 方案预演"></el-option>
        <el-option value="60" label="六阶段 退单"></el-option>
        <el-option value="70" label="六阶段 死单"></el-option>
        <el-option value="80" label="六阶段 转单完成"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" prop="field" style="margin-right:5px!important">
      <el-select v-model="queryParams.field" style="width:150px;">
        <el-option value="order_number" label="查询订单编号"></el-option>
        <el-option value="name" label="查询客户姓名"></el-option>
        <el-option value="phone" label="查询客户手机号"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" prop="param">
      <el-input v-model="queryParams.param" clearable placeholder="输入关键字查询" @keyup.enter.native="handleQuery" style="width:150px"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>

  <div class="inner-container">

    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column prop="orderNumber" label="订单编号" min-width="120"></el-table-column>
      <el-table-column prop="orderDate" label="订单日期" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="客户姓名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="propertyName" label="楼盘名称"></el-table-column>
      <el-table-column prop="propertyAddr" label="楼盘地址" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label="客户类型" :formatter="clientType"></el-table-column>
      <el-table-column prop="status" label="客户状态" min-width="100" :formatter="clientFor"></el-table-column>
      <el-table-column prop="designer" label="设计师"></el-table-column>
      <el-table-column prop="reserveTime" label="客户经理" min-width="100"></el-table-column>
      <el-table-column prop="transferProgress" label="转单进度(阶段)" :formatter="traFormat"  show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="160">
        <template #default="scope">
          <el-button type="primary" link @click="detail(scope.row)">详情</el-button>
          <el-button type="primary" link @click="goToEditView(scope.row)">修改</el-button>
          <el-button type="primary" link @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <br>
    <el-pagination
        :total="total"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRouter} from "vue-router"
import request from "@/utils/request";

const router = useRouter()

// --------------------------------------------------
const loading = ref(false);
const queryFormRef = ref();
const detail = (row) => {
  let id = row.id;
  router.push({path: '/crm/orderDetail', query: {id: id}})
}
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  transferProgress: undefined,
  designerProgress: undefined,
  field: 'order_number',
  param: undefined,
  deptId: undefined
})
const total = ref(0);
const tableData = ref([]);
const selectedIds = ref([]);


const traFormat = (row,column,cellValue,index) => {
    if(cellValue == 10){
      cellValue = '施工图纸待审核';
    }else if(cellValue == 20){
      cellValue = '图纸报价审核-图纸审核中';
    }else if(cellValue == 30){
      cellValue = '图纸报价审核-图纸修改中';
    }else if(cellValue == 40){
      cellValue = '图纸报价审核完成';
    }else if(cellValue == 50){
      cellValue = '方案预演';
    }else if(cellValue == 60){
      cellValue = '退单';
    }else if(cellValue == 70){
      cellValue = '死单';
    }else if(cellValue == 80){
      cellValue = '转单完成';
    }
    return cellValue;
}
const customerSourceArr = ref([]);
const customerStatusArr = ref([]);
const clientFor = (row,column,cellValue,index) => {
  if(!customerStatusArr.value){
    return cellValue;
  }
  for(let item of customerStatusArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

const clientType = (row,column,cellValue,index) => {
  if(!customerSourceArr.value){
    return cellValue;
  }
  for(let item of customerSourceArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

const listData = () => {
  console.log(queryParams.value);
  request.get('/api/crm/orders/load',{
    params: queryParams.value}).then(
      (res) => {
        console.log(res.data);
        tableData.value=res.data.list;
        total.value=res.data.total;
      }
  )
}
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id)
}

const handleQuery = () => {
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  listData();
}

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    transferProgress: undefined,
    designerProgress: undefined,
    field: 'order_number',
    param: undefined,
    deptId: undefined
  };
  queryFormRef.value.resetFields();
  handleQuery();
}

const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  listData()
}

const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  listData()
}

const handleDelete = (row) => {
  let id = row ? [row.id] : [...selectedIds.value]
  if (id.length === 0) {
    ElMessage.error('请选择要删除的记录')
    return
  }
  ElMessageBox.confirm('确定删除吗？', '提示', {
    type: 'warning'
  }).then(() => {
    request.get(`/api/crm/orders/delete?id=${id}`).then(
        (res) => {
          ElMessage.success('删除成功')
        }
    )
    listData()
  }).catch(() => {
  })
}

const goToEditView = (row) => {
  let id = row.id;
  router.push({path: '/crm/detail', query: {id: id}})
}

//--------------------------------------------------
onMounted(() => {
  listData();
  loadDictOptions(customerStatusArr,'customer_status');
  loadDictOptions(customerSourceArr,'customer_source');
})
</script>

<style scoped>

.inner-container {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #409eff55;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);
}

</style>
